<template>
  <d2-container>
    <div class="flex-1 mx-3 mt-3 report-box row-ac-fw">
      <div class="report-data row-a-j-fc">
        <div>销售总额</div>
        <div class="mt-2 font-w font-s-5 text-danger"><span class="font-s-2">￥</span>{{ bustats.total_sales }}</div>
      </div>
      <div class="report-data row-a-j-fc">
        <div>本月销售额</div>
        <div class="mt-2 font-w font-s-5 text-danger"><span class="font-s-2">￥</span>{{ bustats.monthly_sales }}</div>
      </div>
      <div class="report-data row-a-j-fc">
        <div>总订单</div>
        <div class="mt-2 font-w font-s-5 text-danger"><span class="font-s-2"></span>{{ bustats.total_orders }}</div>
      </div>
      <div class="report-data row-a-j-fc">
        <div>本月订单</div>
        <div class="mt-2 font-w font-s-5 text-danger"><span class="font-s-2"></span>{{ bustats.monthly_orders }}</div>
      </div>

    </div>
    <div class="flex-1 mx-2 py-2">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="店铺销售统计" name="first">
          <div class="flex-1 mx-2 mt-3">
            <div class="flex-1 row-ac pb-4 border-bottom-dashed">
              <div class="row-ac">
                <div class="row-ac">
                  <div class="screen-title row-ac font-s-2 text-light-grey">关键词</div>
                </div>
                <div class="screen-input">
                  <el-input class="flex-1" placeholder="按店铺搜索" size="small" />
                </div>
              </div>
              <div class="row-ac ml-4">
                <div class="row-ac">
                  <div class="screen-title row-ac font-s-2 text-light-grey">关键词</div>
                </div>
                <div class="screen-input">
                  <el-input class="flex-1" placeholder="按店铺搜索" size="small" />
                </div>
              </div>
            </div>
            <div class="flex-1 mt-2">
              <el-table :data="bustats.merchant_stats" stripe size="medium">
                <el-table-column align="center" label="序号" type="index" width="65" />
                <el-table-column label="店铺名称" prop="shop_name" width="135" />
                <el-table-column align="center" label="销售总额" prop="total_sales" width="80">
                  <template slot-scope="{ row }">
                    ￥{{ row.total_sales }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="本月销售额" prop="monthly_sales`" width="80">
                  <template slot-scope="{ row }">
                    ￥{{ row.monthly_sales }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="订单总数" prop="total_orders" width="80" />
                <el-table-column align="center" label="本月订单" prop="monthly_orders" width="80" />
                <el-table-column align="center" label="余额" prop="balance" width="80">
                  <template slot-scope="{ row }">
                    ￥{{ row.balance }}
                  </template>
                </el-table-column>
                <!-- <el-table-column align="center" label="已提现" prop="draw_money" width="80">
                  <template slot-scope="{ row }">
                    ￥{{ row.draw_money }}
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="提现申请" name="second">提现申请</el-tab-pane>
      </el-tabs>
    </div>
  </d2-container>
</template>

<script>
  import {
    businessstatsUrl
  } from "@/utils/interface"
  export default {
    data() {
      return {
        activeName: 'first',
        bustats: '',
        shopList: [{
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          },
          {
            id: 1,
            shop_name: "我是店铺名",
            orderNum: 63,
            monorder: 15,
            total_sales: 66656.50,
            mon_sales: 5541.35,
            balance: 2635.9,
            draw_money: 6952.62
          }
        ]
      };
    },
    created() {
      this.getBusinessStats()
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getBusinessStats() {
        this.$get(businessstatsUrl).then(res => {
          this.bustats = res.data
        })
      }
    }
  }
</script>

<style>
  .screen-title {
    width: 80px;
    max-width: 80px;
  }

  .screen-input {
    width: 200px;
  }

  .report-box {
    border: 1px solid #eee;
  }

  .report-data {
    width: 25%;
    height: 120px;
  }
</style>